
.index-cont2{
    padding-top: 160px;padding-bottom:150px;
    h3{
        opacity: 0.3;transform: scale(0);transition: all .75s ease;
        padding-bottom: 2em;
    }
    &.active{
        h3{
            opacity: 1;transform: scale(1);
        }
        .webp-group{
            ul li{
                transform:translate3d(0,0,0);opacity: 1;
            }
        }
    }
    .lattice-item1{
        position: absolute;top: 130px;left:17.5%;
    }
    .lattice-item2{
        position: absolute;top: 100px;right: -260px;
    }
    
}
.align-c{
    text-align:center;
}

.cont-til50{
    font-size:var(--f-size-50);color: #fff;padding-bottom: 1em;font-weight: bold;
}

.webp-group{
    position: relative;z-index: 20;
    ul{
        position: relative;z-index: 25;
        display: flex;
        justify-content: space-between;
        li{
            opacity: 0;
            transition: all 0.5s ease-in 0.5s;
            &:nth-child(1){
                transform:translate3d(-100%,0,0);
            }
            &:nth-child(2){
                transform:translate3d(-50%,0,0);
            }
            &:nth-child(3){
                transform:translate3d(50%,0,0);
            }
            &:nth-child(4){
                transform:translate3d(100%,0,0);
            }
            .thumb{
                position: relative;
            }
            .thumb-nor{
                opacity: 1;transition: opacity .275s linear;
            }
            .thumb-hover{
                position: absolute;top: 0;left: 0;opacity: 0;
                transition: opacity .275s linear;
            }
            &:hover{
                .thumb-nor{opacity: 0}
                .thumb-hover{opacity: 1}
                .lattice-3{
                    opacity: 1;transform: translate(-50%,0) scale(1);
                }
                h4{color: #ffff;}
            }
            h4{
                font-size: var(--f-size-30);text-align: center;transition: color .275s linear;
                position: relative;z-index: 100;
                margin-top: -30px;
            }
            .lattice-3{
                top: 0;left: 50%;transform: translate(-50%,0) scale(0);z-index: -1;opacity: 0;
                transition: all .275s linear;
            }
        }
    }
}

.index-cont3{
    padding-bottom: 85px;
    h3{
        opacity: 0.3;transform: scale(0);transition: all .75s ease;
    }
    ul{
        display: flex;position: relative;z-index: 10;
        li{
            width: 33.33%;box-sizing: border-box;opacity: 0;
            padding: 0 18px;
            transition: all 1.25s ease;
            .thumb{
                position: relative;
            }
            .txt{
                padding-top: 14px;
            }
            .name{
                font-size:var(--f-size-60);color: #fff;font-weight: bold;line-height: 1;
                position: absolute;bottom: 0;left: 14px;
            }
            &:nth-child(1){
                transform: translate3d(-60px,100px,0);
            }
            &:nth-child(2){
                transform: translate3d(0,120px,0);
            }
            &:nth-child(3){
                transform: translate3d(60px,100px,0);
            }
        }
    }
    &.active{
        h3{
            opacity: 1;transform: scale(1);
        }
        ul{
            li{
                opacity: 1;
                &:nth-child(1),
                &:nth-child(2),
                &:nth-child(3){
                    transform: translate3d(0,0,0);
                }
            }
        }
    }
    .lattice-4{
        right: 15%;top: -25px;
    }
    .lattice-5{
        bottom: 0;right: -160px;
    }
    .staggering-grid-2{
        position: absolute;top: 0;left: -144px;
    }
}

.index-case-item{
    max-width: 2560px;
    display: flex;
    justify-content: flex-end;
    margin: 160px auto 300px auto;position: relative;
    .tilt-mask{
        width:50%;background-color: rgba(255,255,255,0);position: absolute;z-index: 103;
        top: 0;bottom: 0;right: 0;
        transform: scale(1.2) translate3d(-100%,0,0);
        transition: transform .75s linear;
    }
    .kv-img-group{
        width: 50%;
        position: relative;
        z-index: 10;
        transform-style: preserve-3d;
        .inner{
            width: 100%;height: 100%;
            transform-style: preserve-3d;
            transition: transform .75s linear;
            transform: translate3d(100%,0,0);
        }
        .C_screen{
            width: 24.108%;left: 25.89%;top: -2.5%;
        }
        .C_words{
            width: 111.444%;left: 3.4375vw;bottom: -10.975%;
        }
        .C_person{
            width: 84.99%;right: -23%;top: -3.5%;z-index: 100;
        }
        .V_words{
            width: 69.512%;left: 4.69%;top: -3.475%;
        }
        .V_screen{
            width: 64.727%;top: 0;right: 0;z-index: 101;
        }
        .V_person{
            width:124%;top: 0;left: -15.9%;z-index: 100;
        }
        .D_screen{
            width: 52.9%;top: -22.8%;right: 0;
        }
        .D_words{
            width: 48%;right: 0;bottom: -15.975%;
        }
        .D_person{
            width: 62.851%;left: 0;top: -21.86%;z-index: 100;
        }
        .bg{
            box-shadow: 20px 20px 50px rgba(0,0,0,0.3);
            transform: translateZ(-1px);
            transition: transform .25s ease-in;
        }
        .abs{
            transform: translateZ(0);
            transition: transform .25s ease-in;
        }
        &.hover{  
            .C_screen{
                transform: translateZ(120px);
            }
            .C_person{
                transform: translateZ(10px);
            }
            .V_screen{
                transform: translateZ(160px);
            }
            .V_person{
                transform: translateZ(30px);
            }
            .D_screen{
                transform: translateZ(100px);
            }
            .D_person{
                transform: translateZ(60px);
            }
            .words{
                transform: translateZ(-80px);
            }
            .bg{
                transform: translateZ(-180px);
            }
        }
    }
    .wrap-box{
        position: absolute;left: 50%;transform: translate(-50%,0);top:0;height: 100%;z-index: 101;
        display: flex;
        align-items: center;
        .inner-content{
            opacity: 0;
            transform: translate3d(-100%,0,0);
            transition: all .75s linear;
            h3{
                span{
                    display: inline-block;
                }
            }
        }
        .logo_group-box{
            max-width: 590px;
            margin-top: 35px;
        }
        .txt{
            max-width: 600px;
            padding-right: 20px;
            padding-bottom: 2em;
        }
    }
    .mobile-show-box{
        display: none;
    }
    &:nth-child(1){
        z-index: 40;
        .staggering-grid-1{
            left: -260px;top: 0;
        }
        .lattice-6{
            bottom: -100px;left: 37.275%;
        }
    }
    &:nth-child(2){
        z-index: 80;
        .staggering-grid-1{
            right: 27.75%;top: -90px;
        }
        .staggering-grid-2{
            bottom: -200px;right: 40.75%;z-index: 0;
        }
        .lattice-6{
            top:120px;right: 4.25%
        }
    }
    &:nth-child(3){
        z-index: 100;
        .lattice-6{
            left: -100px;top: 0;
        }
        .staggering-grid-1{
            bottom: -30.5%;left: 26.385%;
        }
    }
    &:nth-child(2n){
        justify-content: flex-start;
        .tilt-mask{
            left: 0;transform: scale(1.2) translate3d(100%,0,0);
        }
        .kv-img-group{
            .inner{
                transform: translate3d(-100%,0,0);
            }
        }
        .wrap-box{
            width: 100%;
            justify-content: flex-end;
            .inner-content{
                width: 49%;box-sizing: border-box;
                min-width: 600px;
                padding: 0 40px 0 30px;
                transform: translate3d(100%,0,0);
            }
        }
    }
    &.active{    
        .tilt-mask{
            transform: scale(1.2) translate3d(0,0,0);
        }
        .kv-img-group{
            .inner{
                transform: translate3d(0,0,0);
            } 
        }    
        .wrap-box{
            .inner-content{
                opacity: 1;
                transform: translate3d(0,0,0);
            }
        }
    }
    
}
.abs{position: absolute}

.more-btn{
    padding: 6px 25px;position: relative;margin-left: 1px; display: inline-block;
    // border:1px rgba(255,255,255,0.3) solid;
    color: #fff;
    .text{
        position: relative;z-index: 21;
    }
    .dot{
        width: 4px;height: 4px;border-radius: 50%;background-color: #fff;
        display: inline-block;
        z-index: 10;
        position: absolute;
        &:nth-child(2){
            top: -2px;left: -2px;
        }
        &:nth-child(3){
            top: -2px;right: -2px;
        }
        &:nth-child(4){
            bottom: -2px;right: -2px;
        }
        &:nth-child(5){
            bottom: -2px;left: -2px;
        }
    }
    .line-group{
        position: absolute;top: -1px;right: -1px;bottom: -1px;left: -1px;overflow: hidden;z-index: 0;
        &::before{
            content: "";
            position: absolute;
            z-index: -2;
            left: -50%;
            top: -100%;
            width: 200%;
            height: 300%;
            background-color:rgba(255,255,255,0.3);
            background-repeat: no-repeat;
            background-position: 0 0;
            background-image: conic-gradient(transparent,var(--main-color), transparent 30%);
            -webkit-animation: rotate 3s linear infinite;
            animation: rotate 3s linear infinite;
        }
        &::after {
            content: "";
            position: absolute;
            z-index: -1;
            left: 1px;
            top: 1px;
            width: calc(100% - 2px);
            height: calc(100% - 2px);
            background:var(--color-dark);
            border-radius: 0;
        }
    }
    &:hover{
       animation: bounceAni 1s var(--bezier-bounce);
    }
}
button.more-btn{
    padding: 8px 25px;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes bounceAni {
    0% {
        transform: translate3d(0,0,0);
    }
    25% {
        transform: translate3d(0,-4px,0);
    }
    50% {
        transform: translate3d(0,3px,0);
    }
    75% {
        transform: translate3d(0,-2px,0);
    }
    90% {
        transform: translate3d(0,1px,0);
    }
    100% {
        transform: translate3d(0,0,0);
    }
}

@media screen and (max-width:1635px) {
    .index-case-item{
        .wrap-box{
            .inner-content{
                h3{
                    span{
                        display: inline;
                    }
                }
            }
        }
    }
}

@media screen and (max-width:1440px) {
    .index-cont2{
        .lattice-item2{
            right: 0;
        }
    }
    .index-cont3{
        padding-bottom: 55px;
    }
    .index-case-item{
        margin: 120px auto 220px auto;
        &:nth-child(1){
            .staggering-grid-1{
                left:-120px;
            }
        }
    }
}

@media screen and (max-width:1200px) {
    .index-cont3{
        .staggering-grid-2{
            left: 10px;
        }
    }
    .index-case-item{
        &:nth-child(1){
            .staggering-grid-1{
                left:0
            }
        }
    }
}

@media  screen and (max-width:768px) {
    .index-cont2{
        padding-top: 30px;
        padding-bottom: 50px;
        // h3{
        //     opacity: 1;transform: scale(1);
        // }
    }
    .webp-group{
        ul{
            flex-wrap: wrap;
            li{
                width: 50%;margin-bottom:8px;
                h4{
                    margin-top: -12px;
                }
                &:hover{

                    .lattice-3{
                        opacity: 1;transform: translate(-50%,0) scale(0.5);
                    }
                }
            }
        }
    }
    .index-cont3{
        padding-bottom: 10px;
        ul{
            li{
                padding: 0 5px;
                .txt{
                    padding-top: 6px;
                }
            }
        }
        .staggering-grid-2{
            left: 0;transform-origin: left center;
        }
        .lattice-4{
            right: 0;transform-origin: right top;
        }
    }
    .index-case-box{
        width: 100%; overflow: hidden;
    }
    .index-case-item{
        margin-top: 8vw;margin-bottom:16.53vw;
        justify-content: flex-start;
        align-items: flex-end;
        flex-direction: column;
        .wrap-box{
            position: static;left: 0;transform: translate(0,0);padding-bottom: 8vw;
            .inner-content{
                .more-btn{
                    display: none;
                }
                h3{
                    span{display: inline-block;}
                }
            }
            .logo_group-box{
                margin-top: 4.8vw;
            }
            .txt{padding-bottom: 0;}
            .cont-til50{
                padding-bottom: 0;
            }
            
        }
        .tilt-mask{display: none;}
        .kv-img-group{
            width: 89%;
        }
        .mobile-show-box{
            width: 100%;box-sizing: border-box;
            padding-left: 25px;padding-top: 24vw;
            display: block;
            text-align: left;
        }
        &:nth-child(1){
            .staggering-grid-1{
               top: -20px;transform-origin: left top;
            }
            .lattice-6{
                bottom: 30px;left: auto;right: 0;
            }
            .mobile-show-box{
                padding-top: 17.35vw;
            }
        }
        &:nth-child(2){
            .staggering-grid-2{
                bottom: -140px;right: 30px;
            }
        }
        &:nth-child(2n){
            align-items: flex-start;
            .wrap-box{
                justify-content: flex-start;padding-bottom: 12vw;
                .inner-content{
                    width: 100%;min-width: auto; box-sizing: border-box;padding:0;
                }
            }
        }
        &:nth-child(3){
            .wrap-box{
                padding-bottom: 12vw;
            }
        }
    }
}

@media  screen and (max-width:480px) {
    .webp-group ul li .lattice-3{
        transform: translate(-50%,0) scale(0.5);
    }
    .index-cont3{
        ul{
            flex-wrap: wrap;
            li{
                width: 100%;padding: 0 0 15px 0;
                .thumb{
                    height: 45vw;
                    img{
                        height: 100%;object-fit: cover;object-position: bottom center;
                    }
                }
                .name{
                    font-size: 20px;
                }
            }
        }
    }
    
}